<template>
  <div>
    <div id="particles-js"></div>
    <Row class-name="row" justify="center" type="flex">
      <Col span="6">
      <Card>
        <p slot="title">重置密码</p>
        <Alert v-show="showAlert" closable show-icon type="success">密码已经被重置！</Alert>
        <Form ref="form" :model="form" :rules="rules">
          <FormItem class="bottom" label="邮箱" prop="email">
            <Input v-model="form.email" disabled></Input>
          </FormItem>
          <FormItem class="bottom" label="新密码" prop="password">
            <Input v-model="form.password" type="password"></Input>
          </FormItem>
          <FormItem label="确认密码" prop="password_confirmation">
            <Input v-model="form.password_confirmation" type="password"></Input>
          </FormItem>
          <FormItem class="bottom">
            <Button long type="primary" @click="submit('form')">重置密码</Button>
          </FormItem>
        </Form>
      </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import {resetPassword} from 'api/login'

export default {
  name: 'Reset',
  data() {
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入的密码不匹配'))
      } else {
        callback()
      }
    }
    return {
      showAlert: false,
      form: {
        email: '',
        token: '',
        password: '',
        password_confirmation: ''
      },
      rules: {
        password: [],
        password_confirmation: [
          {validator: validatePassCheck, trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.form.email = this.$route.query.email
    this.form.token = this.$route.params.token
  },
  mounted() {
    particlesJS.load('particles-js', 'particles.json')
  },
  methods: {
    submit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          resetPassword(this.form).then(response => {
            this.showAlert = true
            this.$refs[name].resetFields()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.row {
  padding-top: 160px;

  .bottom {
    margin-bottom: 0;
  }
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background: {
    size: cover;
    color: #b61924;
    repeat: no-repeat;
    position: 50% 50%;
  }
}
</style>
